<script lang="ts" setup>


// 深克隆
const deepClone = (target: any): void => {
  if (typeof target !== 'object' || target === null) {
    return target
  }
  const origin = new target.constructor()
  for (let k in target) {
    if (target.hasOwnProperty(k)) {
      origin[k] = deepClone(target[k])
    }
  }
  return origin
}

// 给定任意二维数组，输出所有的排列组合项。
//   比如 [['A','B'], ['a','b'], ['1', '2']]，
//   输出 ['Aa1','Aa2','Ab1','Ab2','Ba1','Ba2','Bb1','Bb2']
const arr = [['A', 'B'], ['a', 'b'], ['1', '2']]
const newArr = arr.reduce((acc, cur): any => {
  let newFl = []
  for (let a of acc) {
    for (let b of cur) {
      newFl.push(a + b)
    }
  }
  return newFl
})
// console.log(newArr, 'res ------ newArr')

// 项目亮点
// 打包优化, 长列表优化, 渲染优化

const s: symbol = Symbol(2)
const foo: object = {}





// 只能返回数字类型的数组, 不够灵活
// function createNumberArray (length: number, value: number): number[] {
//   const arr = Array<number>(length).fill(value)
//   return arr
// }
// console.log(createNumberArray(3, 10))


// 使用T,  不明确的类型使用T进行代表
function createArray<T>(length: number, value: T): T[] {
  const arr = Array<T>(length).fill(value)
  return arr
}
const res = createArray<string>(3, '')




</script>
<template>
  <a
    class="link-calss"
    href="https://juejin.cn/post/6844904147414712334#heading-1"
    target="_blank"
  >css选择器</a>
  <div>
    <h1>渲染优化</h1>
    <p>css与js加载顺序, css是阻塞渲染的, 需要尽早尽快的下载到客户端已缩短首次渲染时间</p>
    <p>减少回流与重绘</p>
    
    
    <p>强缓存和协商缓存</p>
    <p>
      图片格式(
        jpeg/jpg(体积小, 加载快, 有损压缩 -- 背景图或者轮播图),
        png(无损压缩, 质量高, 体积大 -- 小logo),
        svg(文本文件,体积小,不失真 -- 图标),
        base64(文本文件依赖编码, 小图标解决方案),
        webp(支持透明)
      )
    </p>
    <p>


    </p>
  </div>
</template>
<style lang="scss" scoped>
</style>